<!DOCTYPE html>
<html lang="en">
<head>
    // ... existing code ...
    <style>
        
        /* 添加用户列表样式 */
        .chat-layout {
            display: flex;
            max-width: 1200px;
            margin: 20px auto;
        }

        .users-list {
            width: 250px;
            background: white;
            margin-right: 20px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        .users-list h3 {
            padding: 15px;
            background-color: #0084ff;
            color: white;
            border-radius: 10px 10px 0 0;
        }

        .user-item {
            padding: 10px 15px;
            cursor: pointer;
            border-bottom: 1px solid #eee;
        }

        .user-item:hover {
            background-color: #f5f5f5;
        }

        .user-item.active {
            background-color: #e3f2fd;
        }

        .chat-container {
            flex: 1;
        }
    </style>
</head>
<body>
    <div class="chat-layout">
        <div class="users-list">
            <h3>在线用户</h3>
            <div id="usersList">
                <!-- 用户列表将在这里动态添加 -->
            </div>
        </div>
        <div class="chat-container">
            <div class="chat-header">
                <h2>聊天室 - <span id="currentChat">未选择聊天对象</span></h2>
            </div>
            <div class="chat-messages" id="messageArea">
                <!-- 消息将在这里动态添加 -->
            </div>
            <div class="chat-input">
                <form id="messageForm" onsubmit="sendMessage(event)">
                    <input type="text" id="messageInput" placeholder="输入消息..." required>
                    <button type="submit">发送</button>
                </form>
            </div>
        </div>
    </div>

    <script>
        let currentUserId = null;
        let selectedUserId = null;
        const ws = new WebSocket('ws://localhost:8080');

        // WebSocket连接建立时
        ws.onopen = () => {
            console.log('WebSocket连接已建立');
            // 发送用户登录消息
            const username = prompt('请输入你的用户名：');
            ws.send(JSON.stringify({
                type: 'login',
                username: username
            }));
        };

        // 接收消息处理
        ws.onmessage = (event) => {
            console.log('收到服务端消息：', event);
            const data = JSON.parse(event.data);
            
            switch(data.type) {
                case 'login_response':
                    currentUserId = data.userId;
                    break;
                    
                case 'users_list':
                    updateUsersList(data.users);
                    break;
                    
                case 'chat_message':
                    if (
                        (data.from === selectedUserId && data.to === currentUserId) ||
                        (data.from === currentUserId && data.to === selectedUserId)
                    ) {
                        appendMessage(data.message, data.from === currentUserId ? 'sent' : 'received');
                    }
                    break;
            }
        };

        // 更新用户列表
        function updateUsersList(users) {
            const usersList = document.getElementById('usersList');
            usersList.innerHTML = '';
            
            users.forEach(user => {
                if (user.userId !== currentUserId) {
                    const userDiv = document.createElement('div');
                    userDiv.className = `user-item ${selectedUserId === user.userId ? 'active' : ''}`;
                    userDiv.textContent = user.username;
                    userDiv.onclick = () => selectUser(user);
                    usersList.appendChild(userDiv);
                }
            });
        }

        // 选择聊天对象
        function selectUser(user) {
            selectedUserId = user.userId;
            document.getElementById('currentChat').textContent = user.username;
            document.getElementById('messageArea').innerHTML = '';
            // 更新选中状态
            document.querySelectorAll('.user-item').forEach(item => {
                item.classList.remove('active');
                if (item.textContent === user.username) {
                    item.classList.add('active');
                }
            });
        }

        // 发送消息
        function sendMessage(event) {
            event.preventDefault();
            const messageInput = document.getElementById('messageInput');
            const message = messageInput.value;

            if (!selectedUserId) {
                alert('请先选择聊天对象！');
                return;
            }
            
            if (message.trim()) {
                ws.send(JSON.stringify({
                    type: 'chat_message',
                    to: selectedUserId,
                    message: message
                }));
                messageInput.value = '';
            }
        }

        // 添加消息到界面
        function appendMessage(message, type) {
            const messageArea = document.getElementById('messageArea');
            const messageDiv = document.createElement('div');
            messageDiv.className = `message ${type}`;
            messageDiv.innerHTML = `
                <div class="message-content">
                    ${message}
                </div>
            `;
            messageArea.appendChild(messageDiv);
            messageArea.scrollTop = messageArea.scrollHeight;
        }
    </script>
</body>
</html>